<template>
  <div class="wrap">
    <vue-particles
      class="particles"
      color="#808080"
      linesColor="#808080"
    />
    <div class="upper">
      <div
        v-for="item in renderList"
        :key="item.title"
      >
        <h1 :id="item.id">
          {{ item.title }}
        </h1>
        <RuleCollapse
          v-if="item.type === 'collapse'"
          :itemList="item.contain"
        />
        <RuleTimeline
          v-if="item.type === 'timeline'"
          :itemList="item.contain"
          class="myTimeline"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ruleConf from '@/config/ruleConf.json';
import RuleTimeline from '@/components/RuleTimeline.vue';
import RuleCollapse from '@/components/RuleCollapse.vue';
export default {
  name: 'Rule',
  components: {
    RuleTimeline,
    RuleCollapse
  },
  props: {
    renderList: {
      type: Array,
      default: () => ruleConf
    }
  }
};
</script>

<style scoped>
.wrap {
  position: relative;
}
.upper {
  z-index: 2;
  width: 70%;
  opacity: 0.9;
  margin-left: 15%;
}
.myTimeline {
  margin-right: 4%;
}
.particles {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
}
</style>
